<template>
	<div class="login-container" :style="{ boxShadow: `var(--el-box-shadow-light)` }">
		<el-form :rules="rules" :model="loginData" class="form-input">
			<el-form-item label="邮箱" @keyup.enter="login" prop="email" class="login-input-text">
				<el-input v-model="loginData.email">
					<template #suffix>
						<el-icon class="el-input__icon">
							<user />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item label="密码" @keyup.enter="login" prop="password" class="login-input-text">
				<el-input type="password" v-model="loginData.password">
				</el-input>
			</el-form-item>
		</el-form><br>
		<div class="login-btn">
			<el-button @click="tiaozhuan()">注册</el-button>
			<el-button type="primary" @click="login">登录</el-button>
		</div>
	</div>
</template>

<script>
	import qs from 'qs'
	import storeUtil from '../utils/localstorage'
	import {
		User
	} from '@element-plus/icons-vue'
	export default {
		components: {
			user: User
		},
		name: "Login",
		data() {
			return {
				loginData: {},
				rules: {
					email: {
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					},
					password: {
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				}
			}
		},
		methods: {
			tiaozhuan() {
				this.$router.push({
					path: '/Add'
				})
			},
			login() {
				let data = qs.stringify(this.loginData)
				if (this.loginData.email == '') {
					alert("请输入邮箱");
					return;
				} else if (this.loginData.password == '') {
					alert("请输入密码")
					return;
				} else {
					this.$axios.post('/user/login', data)
						.then(data => {
							if (data.code === 0) {
								let gameuid = data.result.user.id;
								let token = data.result.user.token;
								storeUtil.save('gameuid', gameuid);
								storeUtil.save('token', token);
								this.$router.push({
									path: '/',
									query: {
										typeId: data.result.user.typeId,
										name: data.result.user.name
									}
								})
							} else {
								alert(data.msg);
							}
							//在前端保存以上两个值，用
						}).catch(error => {
							console.log(error);
						})
				}
			}
		}
	}
</script>

<style scoped>
	.login-container {
		position: relative;
		top: 100px;
		margin: 0 auto;
		width: 400px;
		height: 220px;
		border: gray solid 1px;
		border-radius: 5px;
	}

	.form-input {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-input-text {
		width: 300px;

	}

	.login-btn {
		margin-top: 1rem;
		display: flex;
		justify-content: center;
	}
</style>
